<template>
  <div>
    <div class="mytag">
      <input
        ref="inputRef"
        @blur="isEdit = false"
        type="text"
        v-if="isEdit"
        placeholder="请输入"
        :value="value"
        @keyup.enter="handleEnter"
        class="tableinput"
      />
      <div v-else @click="handerClick" class="text">
        {{ value }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { nextTick } from 'vue'
import { defineProps, defineEmits } from 'vue'

const isEdit = ref(false)
const inputRef = ref(null)
const handerClick = () => {
  isEdit.value = true

  nextTick(() => {
    inputRef.value.focus()
  })
  console.log(props.value)
  console.log(props.itemId)
}

onMounted(() => {
  // console.log(props.value)
})

//接受父组件传来的数据value,和item.id,
//用来点击时确认点到了那个
const props = defineProps({
  value: Array || Object,
  itemId: [String, Number]
})
const emit = defineEmits(['input'])
//子传父，回车时将数据提交给父组件

const handleEnter = (e) => {
  console.log(e.target.value, props.itemId)

  emit('input', e.target.value, props.itemId)
}

// 调整 input 框的宽度以适应内容
</script>

<style>
/* input {
  width: 100%;
  height: 100%;
  border: 0;
  box-sizing: content-box; 
}
.text {
  width: 100%;
  height: 100%;
} */

input {
  height: auto;
  border: 0;
  box-sizing: content-box; /* 确保宽度计算包含内容 */
}
.text {
  cursor: pointer;
}
</style>
